<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>职位管理</title>
    <!-- vue -->
    <script src="../common/js/vue2.js"></script>
    <!-- 引入http-vue-loader -->
    <script src="../common/js/vueLoader.js"></script>
    <!-- vant -->
    <script src="../common/ui/vant-ui/ui.js"></script>
  </head>
  <body>
    <div id="app">
      <main-top></main-top>
      <div class="mainCenter">
        <div class="leftContent">
          <top title="职位管理" icon="share-o"></top>
          <div class="pd20">
            <!-- 切换 -->
            <div class="pd10 flex pore tac">
              <div
                v-for="(i,index) in tabs"
                @click="activeCk(index)"
                class="f1 fs14"
              >
                {{ i }}
              </div>
              <div class="spanLine" ref="bottomSpan"></div>
            </div>
            <!-- 内容 -->
            <div
              v-for="i in jobList"
              class="msgCard"
              :class="i.isClose?'close':''"
            >
              <div class="flex jcsb">
                <div class="flex aic">
                  <div class="fs18 fwb">{{i.name}}</div>
                  <van-tag
                    class="minitag"
                    v-if="i.isPu"
                    :color="i.isClose?'':'green'"
                    plain
                    >普</van-tag
                  >
                </div>
                <div class="fs12" v-if="i.isClose">已关闭</div>
              </div>
              <div class="msg">
                <div>{{ i.position }}</div>
                <div>{{ i.eb }}</div>
                <div>{{ i.year }}</div>
                <div>{{ i.money }}</div>
                <div v-if="i.ordMsg">{{ i.ordMsg }}</div>
              </div>
              <div class="cr fs12 flex jcsb mt2" v-if="i.isPassTime">
                <div>
                  <van-icon name="warning" />
                  <span class="lh2"
                    >招聘截止时间已过，修改后可提升职业曝光</span
                  >
                </div>
                <span style="width: 90px" class="tar"
                  >修改时间<van-icon name="arrow"
                /></span>
              </div>
            </div>
            <van-button type="primary" class="w100">发布新职位</van-button>
          </div>
        </div>
        <lan-adright></lan-adright>
      </div>
      <main-footer></main-footer>
    </div>
  </body>
</html>
<style>
  .spanLine {
    --addW-width: 9%;
    width: 22px;
    height: 3px;
    background-color: red;
    position: absolute;
    bottom: 0px;
    left: var(--addW-width);
    transition: left 0.3s;
  }
  .msgCard {
    padding: 20px 0 40px 0;
    border-bottom: 1px solid rgba(150, 148, 148, 0.11);
  }
  .minitag {
    padding: 1px 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
  }
  .msg {
    margin-top: 10px;
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
  }
  .msg div {
    font-family: "Helvetica Neue";
    padding: 1px 5px;
    border-right: 1px solid #c9c8c8a8;
  }
  .msg div:last-child {
    padding-right: 0;
    border-right: none;
  }
  .close {
    color: #c9c4c4cb;
  }
  .mt2 {
    margin-top: 8px;
  }
</style>
<script>
  Vue.use(httpVueLoader);
  new Vue({
    el: "#app",
    data: {
      tabs: ["全部", "开放中", "待开放", "审核失败", "已关闭"],
      active: 0,
      activeName: 0,
      jobList: [
        {
          name: "网站开发",
          isPu: true,
          position: "阳江 人民广场",
          eb: "学历不限",
          year: "1-3年",
          money: "2-3k",
        },
        {
          name: "网站开发",
          position: "阳江 人民广场",
          eb: "学历不限",
          year: "1-3年",
          money: "2-3k",
        },
        {
          name: "网站开发",
          isPu: true,
          position: "阳江 人民广场",
          eb: "学历不限",
          year: "1-3年",
          money: "2-3k",
          isClose: true,
        },
        {
          name: "网站开发",
          isPu: true,
          position: "阳江 人民广场",
          eb: "学历不限",
          year: "1-3年",
          money: "20k-300k",
          ordMsg: "校招",
          isClose: true,
          isPassTime: true,
        },
      ],
    },
    components: {
      top: httpVueLoader("../common/commpent/top.vue"),
      "main-top": httpVueLoader("../common/commpent/main/workTop.vue"),
      "main-footer": httpVueLoader("../common/commpent/main/mainFooter.vue"),
      "lan-adright": httpVueLoader("../common/commpent/lan/adRight.vue"),
    },
    methods: {
      activeCk(index) {
        let list = ["10%", "29%", "48%", "68%", "87%"];
        this.active = index;
        this.$refs.bottomSpan.style.setProperty("--addW-width", list[index]);
      },
    },
  });
</script>
